<template>
  <view class="page-default">
    <c-nav-bar title="迎新统计" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="bg-green-rgba m-3 mt-6 rounded-4 px-4 pb-8 pt-2 line-height-6">
      <view class="my-6 flex items-center justify-center">
        <up-select
          v-model:current="cateId" label="2025年新生" class="font-bold"
          :options="cateList" item-color="#6E7B8B" @select="selectItem"
        />
      </view>

      <view v-for="item in dataList" class="mb-2 flex items-center">
        <view class="relative w-full">
          <view class="absolute left-2 top-1 w-full font-bold" style="z-index: 999;">
            {{ item.name }}
          </view>
          <up-line-progress class="w-full" :percentage="item.rate" height="36" active-color="#E8F1FF" inactive-color="#F5F9FC" />
        </view>
        <view class="ml-3 w-30">
          <view class="text-sm text-#6E7B8B">
            实到{{ item.number }}人
          </view>
          <view class="text-xs text-#C5C9D1">
            应到{{ item.realNum }}人
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const dataList = ref([
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 90 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 89 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 80 },
  { name: '2025级旅游1班', realNum: 150, number: 170, rate: 79 },
]);
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-rgba {
  background: linear-gradient(to bottom, rgba(231, 246, 234, 0.95),rgba(255, 255, 255, 0.95), #ffffff);
}

:deep(.u-line-progress__text){
  color: #2D7AFC !important;
  font-size: 16px !important;
  font-weight: bold !important;
}
:deep(.u-select__content .active .u-select__item_text){
  color:#3AA69B !important;
}
:deep(.u-select__content .u-select__options__wrap){
 top: 30px ;
}
</style>
